import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal, Row, Col, Select,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

const { Option } = Select;

interface DeliveryProps extends FormComponentProps {
  dispatch?: Dispatch;
  search: any;
  orderInfo: any;
  cancelVisible: boolean;
  changeCancelModal: (cancelVisible: boolean) => void;
}

@connect(({
  logisCenterIssueList,
}: any) => ({
  logisCenterIssueList,
}))

class DeliveryElemInfo extends Component<DeliveryProps> {
  handleConfirmCancel = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors: any, values: any) => {
      if (errors) return;

      const { search, orderInfo } = this.props;
      const params = {
        search,
        ...values,
        ...orderInfo,
      };

      const { dispatch }: any = this.props;
      dispatch({
        type: 'logisCenterIssueList/cancel',
        payload: params,
      });

      const { changeCancelModal } = this.props;
      changeCancelModal(false);
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      cancelVisible,
      changeCancelModal,
    } = this.props;
    return (
      <Modal
        title="确认取消投递？"
        visible={cancelVisible}
        onOk={this.handleConfirmCancel}
        onCancel={() => changeCancelModal(false)}
      >
        <h4 style={{ color: 'red' }}>提示：柜体远程开箱慎操作!</h4>
        <Form className="tableListForm" hideRequiredMark>
          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="运单号">
                <span>JD1234536575676</span>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="远程开箱">
                {getFieldDecorator('openCell', {
                  initialValue: 1,
                  rules: [{ required: true, message: '请选择是否远程开箱' }],
                })(
                  <Select placeholder="请选择">
                    <Option value={1}>是</Option>
                    <Option value={0}>否</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<DeliveryProps>()(DeliveryElemInfo);
